<script setup lang="ts">
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from 'element-plus'
import service from "@/utils/request.ts";

const router = useRouter()

const formRef = ref<FormInstance>()
const loading = ref(false)

const remember = ref(false)
const userData = reactive({
	email: '',
	password: '',
})

const user = reactive({
	userData,
	remember
})

const rules = reactive<FormRules>({
	email: [
		{required: true, message: '请输入邮箱地址', trigger: 'blur'},
		{type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
	],
	password: [
		{required: true, message: '请输入密码', trigger: 'blur'},
		{min: 6, message: '密码长度不能少于6位', trigger: 'blur'}
	]
})

const handleLogin = async () => {
	if (!formRef.value) return
	
	await formRef.value.validate((valid, fields) => {
		if (valid) {// 验证是否通过
			loading.value = true
			
			service.post("ul/login", {
				user: {
					email: userData.email,
					password: userData.password
				},
				remember: remember.value
			}).then(response => {
				console.log(response)
				if (response.status === 200) {
					console.log('登录表单:', user)
					ElMessage.success('登录成功')
					localStorage.setItem('token', response.data.token)//将token保存到本地以通过网站验证
					localStorage.setItem('user', JSON.stringify({
						user_email: response.data.user.email,
						user_avatar: response.data.user.avatar,
						user_name: response.data.user.username
					}))
					router.push('/home')
				}
			}).catch(error => {
				if (error.response.status === 400) {
					ElMessage.error('用户名或密码错误')
				} else {
					ElMessage.error('用户不存在')
				}
			}).finally(() => {
				loading.value = false
			})
		} else {
			console.log('验证失败', fields)
		}
	})
}

const goToRegister = () => {
	router.push('/register')
}

const goToForgotPassword = () => {
	router.push('/forgot-password')
}
</script>

<template>
	<div class="login-container">
		<div class="login-box">
			<div class="login-header">
				<h2>欢迎登录</h2>
				<p>请输入您的账号信息</p>
			</div>
			
			<el-form
				ref="formRef"
				:model="userData"
				:rules="rules"
				label-position="top"
				size="large"
				class="login-form"
			>
				<el-form-item label="邮箱" prop="email">
					<el-input
						v-model="userData.email"
						placeholder="请输入邮箱地址"
						clearable
						prefix-icon="Message"
					/>
				</el-form-item>
				
				<el-form-item label="密码" prop="password">
					<el-input
						v-model="userData.password"
						type="password"
						placeholder="请输入密码"
						show-password
						prefix-icon="Lock"
					/>
				</el-form-item>
				
				<div class="form-options">
					<el-checkbox v-model="remember">记住我</el-checkbox>
					<el-link type="primary" @click="goToForgotPassword">忘记密码?</el-link>
				</div>
				
				<el-form-item>
					<el-button
						type="primary"
						class="login-button"
						:loading="loading"
						@click="handleLogin"
					>
						{{ loading ? '登录中...' : '登录' }}
					</el-button>
				</el-form-item>
				
				<div class="register-prompt">
					<span>还没有账号？</span>
					<el-button type="text" @click="goToRegister">立即注册</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<style scoped>
/* 确保根元素高度为视口高度 */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	height: 100%;
	width: 100%;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
	padding: 20px;
	box-sizing: border-box;
	position: relative;
}

/* 添加背景装饰元素 */
.login-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle at 10% 20%, rgba(120, 119, 198, 0.05) 0%, transparent 20%),
	radial-gradient(circle at 90% 60%, rgba(255, 119, 198, 0.05) 0%, transparent 20%),
	radial-gradient(circle at 50% 90%, rgba(120, 219, 255, 0.05) 0%, transparent 20%);
	z-index: 0;
}

.login-box {
	width: 100%;
	max-width: 480px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	padding: 40px;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}

.login-box:hover {
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.login-header {
	text-align: center;
	margin-bottom: 40px;
}

.login-header h2 {
	font-size: 32px;
	color: #303133;
	margin-bottom: 15px;
	font-weight: 600;
}

.login-header p {
	font-size: 16px;
	color: #909399;
}

.login-form {
	margin-top: 20px;
}

.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

.login-button {
	width: 100%;
	height: 48px;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 25px;
	border-radius: 4px;
}

.register-prompt {
	text-align: center;
	color: #606266;
	font-size: 15px;
}

.register-prompt span {
	margin-right: 8px;
}

/* 添加响应式调整 */
@media (min-width: 768px) {
	.login-box {
		max-width: 500px;
		padding: 50px;
	}
	
	.login-header h2 {
		font-size: 36px;
	}
}

/* 针对大屏幕的额外优化 */
@media (min-width: 1200px) {
	.login-container {
		padding: 60px;
	}
	
	.login-box {
		max-width: 560px;
		padding: 60px;
	}
	
	.login-header h2 {
		font-size: 38px;
	}
}

/* 针对大屏幕的额外优化 */
@media (min-width: 1660px) {
	.login-container {
		padding: 60px;
	}
	
	.login-box {
		max-width: 560px;
		padding: 60px;
	}
	
	.login-header h2 {
		font-size: 38px;
	}
}

/* 添加动画效果 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.login-box {
	animation: fadeIn 0.6s ease-out;
}
</style>